<template>
    <div>
      <!--模糊查询-->
      <el-form :inline="true" :model="formInline" class="demo-form-inline" ref="formInline">
        <el-form-item label="手机号码">
          <el-input v-model="formInline.uphone" ></el-input>
        </el-form-item>
        <el-form-item label="课程名称">
          <el-input v-model="formInline.title" ></el-input>
          <!--<el-select v-model="formInline.title">-->
            <!--<el-option value="">所有类</el-option>-->
          <!--</el-select>-->
        </el-form-item>
        <el-form-item label="订单编号">
          <el-input v-model="formInline.orderNo" ></el-input>
        </el-form-item>
        <el-form-item label="定单状态">
          <el-select v-model="formInline.orderStatus">
            <el-option value="0" label="待支付">待支付</el-option>
            <el-option value="1" label="已支付">已支付</el-option>
            <el-option value="2" label="已关闭">已关闭</el-option>
          </el-select>
        </el-form-item>
        <el-form-item>
          <el-button type="primary" @click="search()">查询</el-button>
          <el-button type="primary" @click="res()">重置</el-button>
        </el-form-item>
      </el-form>
      <!--表格-->
      <el-table
        :data="tableData"
        border
        style="width: 100%"
      >
        <el-table-column
          prop="xuhao"
          label="序号"
          width="50px"
        >
          <template slot-scope="scope">
            <span>{{(pages.page - 1) * pages.size + scope.$index + 1}}</span>
          </template>
        </el-table-column>
        <!--订单详情-->
        <el-table-column
          prop="courseinfo"
          label="订单号"
          width="250px"
        >
         <template slot-scope="scope">
           {{ scope.row.orderNo}}<br/>
           <el-button type="text" @click="orderinfo(scope.row)"> 【详情】</el-button>
           <!--点击订单显示订单详情-->
           <el-dialog
             title="订单详情"
             :visible.sync="dialogVisible"
             width="50%"
             :append-to-body="true"
             >
             <div>
               <el-row>
               <el-col :span="24"><div class="grid-content bg-purple-light"style="padding-top: 10px">
                 <span style="margin-left: 10px;">订单信息</span>
               </div></el-col>
               </el-row>
               <el-row>
                 <el-col :span="12"><div>
                   <span class="span">用户编号:</span>&nbsp;&nbsp;&nbsp;{{orderinfodata.user.uid}}
                 </div></el-col>
                 <el-col :span="12"><div>
                   <span class="span">注册时间:</span>&nbsp;&nbsp;&nbsp;{{orderinfodata.user.userCreate}}
                 </div></el-col>
               </el-row>
               <el-row>
                 <el-col :span="12"><div>
                   <span class="span">课程名称:</span>&nbsp;&nbsp;&nbsp;{{orderinfodata.eduCourse.title}}
                 </div></el-col>
                 <el-col :span="12"><div>
                   <span class="span">讲师名称:</span>&nbsp;&nbsp;&nbsp;{{orderinfodata.lecturer.lecturerUserName}}
                 </div></el-col>
               </el-row>
               <el-row>
                 <el-col :span="12"><div>
                   <span class="span">订单号:</span>&nbsp;&nbsp;&nbsp;{{orderinfodata.orderNo}}
                 </div></el-col>
                 <el-col :span="12"><div>
                   <span class="span">支付时间:</span>&nbsp;&nbsp;&nbsp;{{orderinfodata.payTime}}
                 </div></el-col>
               </el-row>
               <el-row>
                 <el-col :span="12"><div>
                   <span class="span">客户备注:</span>&nbsp;&nbsp;&nbsp;{{orderinfodata.remarkCus}}
                 </div></el-col>
                 <el-col :span="12"><div>
                   <span class="span">后台备注:</span>&nbsp;&nbsp;&nbsp;{{orderinfodata.remark}}
                 </div></el-col>
               </el-row>
               <el-row>
                 <el-col :span="12"><div>
                   <span class="span">交易类型:</span>&nbsp;&nbsp;&nbsp;{{orderinfodata.tradeType}}
                 </div></el-col>
                 <el-col :span="12"><div>
                   <span class="span">支付方式:</span>&nbsp;&nbsp;&nbsp;{{orderinfodata.payType}}
                 </div></el-col>
               </el-row>

             </div>


           </el-dialog>
         </template>
        <!--课程信息-->
        </el-table-column>
        <!--课程信息-->
        <el-table-column
          prop="courseinfo"
          label="课程信息"
        >
          <template slot-scope="scope">
            {{ scope.row.eduCourse.title}}<br/>
          <!--<el-button type="text" @click="dialogVisible1 = true">【详情】</el-button>-->

          <el-dialog
            title="提示"
            :visible.sync="dialogVisible1"
            width="30%"
            :append-to-body="true">
            <span>这是一段信息</span>
            <span slot="footer" class="dialog-footer">
               <el-button @click="dialogVisible1 = false">取 消</el-button>
             </span>
          </el-dialog>
          </template>
        </el-table-column>
        <!--讲师信息-->
        <el-table-column
          prop="lecturerinfo"
          label="讲师信息"
        >
          <template slot-scope="scope">
            {{ scope.row.lecturer.lecturerUserName}}<br/>
            <!--<el-button type="text" @click="lecturerinfo(scope.row)">【详情】</el-button>-->

            <el-dialog
              title="提示"
              :visible.sync="dialogVisible2"
              width="30%"
              :append-to-body="true">
              <span>这是一段信息</span>
              <span slot="footer" class="dialog-footer">
               <el-button @click="">取 消</el-button>
             </span>
            </el-dialog>
          </template>
        </el-table-column>
        <!--用户信息-->
        <el-table-column
          prop="userinfo"
          label="用户信息"
        >
          <template slot-scope="scope">
            {{ scope.row.user.uphone}}<br/>
            <el-button type="text" @click=" userinfo(scope.row)">【详情】</el-button>

            <el-dialog
              title="用户信息"
              :visible.sync="dialogVisible3"
              width="50%"
              :append-to-body="true">
              <div>
                  <div style="border: #EBEEF5 1px solid;margin-bottom:10px;border-radius: 4px;padding:0 2% 0 2%" >
                    <el-divider>基础信息</el-divider>
                    <el-row>
                      <el-col :span="12"><div>
                        <span class="span">用户编号:</span>&nbsp;&nbsp;&nbsp;{{orderinfodata.user.uid}}
                      </div></el-col>
                      <el-col :span="12"><div>
                        <span class="span">用户类型:</span>&nbsp;&nbsp;&nbsp;
                        <span v-if="orderinfodata.user.userType==1" style="color: blue">用户</span>
                        <span v-if="orderinfodata.user.userType==2" style="color: blue">讲师</span>
                      </div></el-col>
                    </el-row>

                    <el-row>
                      <el-col :span="12"><div>
                        <span class="span">手机号:</span>&nbsp;&nbsp;&nbsp;{{orderinfodata.user.uphone}}
                      </div></el-col>
                      <el-col :span="12"><div>
                        <span class="span">昵称:</span>&nbsp;&nbsp;&nbsp;{{orderinfodata.user.unickname}}
                      </div></el-col>
                    </el-row>

                    <el-row>
                      <el-col :span="12"><div>
                        <span class="span">注册时间:</span>&nbsp;&nbsp;&nbsp;{{orderinfodata.user.userCreate}}
                      </div></el-col>
                      <el-col :span="12"><div>
                        <span class="span">状态:</span>&nbsp;&nbsp;&nbsp;
                        <span v-if="orderinfodata.user.status==0" >正常</span>
                        <span v-if="orderinfodata.user.status==1">禁用</span>
                      </div></el-col>
                    </el-row>

                  </div>
                  <div style="border: #EBEEF5 1px solid;margin-bottom:10px;border-radius: 4px;padding:0 2% 0 2%" >
                  <el-divider>基础信息</el-divider>
                  <el-row>
                    <el-col :span="12"><div>
                      <div style="" class="span">用户头像:</div>&nbsp;&nbsp;&nbsp;
                      <el-image  style="margin-left: 15%" :src="orderinfodata.user.uimage"></el-image>
                    </div></el-col>
                    <el-col :span="12"><div>
                    </div></el-col>
                  </el-row>

                  <el-row>
                    <el-col :span="12"><div>
                      <span class="span">性别:</span>&nbsp;&nbsp;&nbsp;{{orderinfodata.user.usex}}
                    </div></el-col>
                    <el-col :span="12"><div>
                      <span class="span">年龄:</span>&nbsp;&nbsp;&nbsp;{{ getAge(orderinfodata.user.ubirthday)}}
                    </div></el-col>
                  </el-row>

                  <el-row>
                    <el-col :span="12"><div>
                      <span class="span">备注:</span>&nbsp;&nbsp;&nbsp;{{orderinfodata.user.uremark}}
                    </div></el-col>
                    <el-col :span="12"><div>
                    </div></el-col>
                  </el-row>

                </div>
              </div>
            </el-dialog>
          </template>
        </el-table-column>

        <el-table-column
          prop="userinfo"
          label="交易类型/渠道"
        >
          <template slot-scope="scope">
            {{ scope.row.tradeType}}
          </template>
        </el-table-column>
        <el-table-column
          prop="userinfo"
          label="支付方式/价格"
        >
          <template slot-scope="scope">
            <div>{{ scope.row.payType}}</div>
            <div>{{ scope.row.pricePayable}}</div>
          </template>
        </el-table-column>
        <el-table-column
          prop="orderStatus"
          label="订单状态/时间"
        >
          <template slot-scope="scope">
           <div>
             <span>{{[ "待支付", "已支付" ,"已关闭" ][scope.row.orderStatus]}}</span>
             <!-- 或者这样写 ：<span v-if="scope.row.orderStatus == 0">正常</span>-->
           </div>
            <div>{{ scope.row.payTime}}</div>
          </template>
        </el-table-column>
        <el-table-column
          prop="remarkCus"
          label="客户备注"
          width="350px"
        >
        </el-table-column>
        <el-table-column
          fixed="right"
          label="操作"
        >
          <template slot-scope="scope">
            <el-button type="success" size="small" @click="handleClick(scope.row)">备注</el-button>
          </template>
        </el-table-column>
      </el-table>
      <el-pagination
        background
        layout="prev, pager, next,sizes"
        @size-change="handleSizeChange"
        @current-change="handleCurrentChange"
        :current-page="page.current"
        :page-sizes="[1, 2, 4, 10]"
        :page-size="page.size"
        :total="page.total">
      </el-pagination>
      <!--添加备注的弹出层-->
      <el-dialog title="备注" :visible.sync="dialogFormVisible">
        <el-form ref="form" :model="form" label-width="80px" >
          <el-form-item label="" prop="goodsName">
            <el-input type="textarea" v-model="form.remark"></el-input>
          </el-form-item>

        </el-form>
        <div slot="footer" class="dialog-footer">
          <el-button type="primary" @click="onSubmit()">添加</el-button>
        </div>
      </el-dialog>
    </div>
</template>

<script>
    import qs from 'qs'
    export default {
        name: "courseorder",
        methods: {
          handleSizeChange(val) {
            //console.log(`每页 ${val} 条`);
            this.page.size = val;
            this.page.current = 1;
            this.selectOrder();
          },
          handleCurrentChange(val) {
            //console.log(`当前页: ${val}`);
            this.page.current = val;
            this.selectOrder();
          },
          handleClick(row) {
            //console.log(row.orderId);
            this.form.orderId = row.orderId;
            this.dialogFormVisible =true;
           },
          onSubmit() {
            this.dialogFormVisible = false;
            this.$refs['form'].validate((valid) => {
              if (valid) {
                console.log(this.form);
                this.$axios.post('/order/orderInfo/addRemark',qs.stringify(this.form)).then(res=>{
                  if(res.data){
                    // this.dialogVisible  = false;
                    // this.dialogFormVisible=false;
                    this.form.orderId ='';
                    this.form.remark ='';
                    this.selectOrder();
                  }
                }),function () {
                  alert("失败")
                }
              } else {
                console.log('error submit!!');
                return false;
              }
            });
          },
          orderinfo(row){
            this.dialogVisible = true;
            this.orderinfodata = row;
            //console.log(this.orderinfodata);
          },
          userinfo(row){
            this.dialogVisible3 = true;
            this.orderinfodata = row;
           // console.log(this.orderinfodata);
          },
          // lecturerinfo(row){
          //   this.dialogVisible2 = true
          //   this.$axios.post("/teacher/teacher/lecturer/findAll").then(res=>{
          //     alert(JSON.stringify(res));
          //     // console.log(res.data.records);
          //     // this.page.total = res.data.total;
          //     // this.tableData = res.data.records;
          //   }),function () {
          //     alert("失败!")
          //   }
          // },
          selectOrder(){
            this.$axios.post("/order/orderInfo/findAll",qs.stringify(this.page)).then(res=>{
              //alert(JSON.stringify(res));
              console.log(res.data.records);
              this.page.total = res.data.total;
              this.tableData = res.data.records;
            }),function () {
                alert("失败!")
            }
          },
          //跟据生日得到年龄的函数
          getAge(bir){
            let birthdays = new Date(bir.replace(/-/g, "/"));
            let d = new Date();
            let age =
              d.getFullYear() -
              birthdays.getFullYear() -
              (d.getMonth() < birthdays.getMonth() ||
              (d.getMonth() == birthdays.getMonth() &&
                d.getDate() < birthdays.getDate())
                ? 1
                : 0);
            return age;
          },
          search(){
            // this.page.goodsName = this.formInline.user;
            // this.page.goodsType = this.formInline.region;
            this.$refs['formInline'].validate((valid) => {
              if (valid) {
                console.log(this.formInline);
                this.page.orderNo = this.formInline.orderNo;
                this.page.title = this.formInline.title;
                this.page.uphone = this.formInline.uphone;
                this.page.orderStatus = this.formInline.orderStatus
                console.log(this.page)
              } else {
                console.log('error submit!!');
                return false;
              }
            });
            this.selectOrder();
          },
          res(){
            this.$nextTick(()=>{
              this.formInline.uphone= '';
              this.formInline.title ='';
              this.formInline.orderNo='';
              this.formInline.orderStatus='';
              this.page.uphone ='';
              this.page.title ='';
              this.page.orderNo='';
              this.page.orderStatus='';
              this.selectOrder();
            });
          },
        },
        data() {
        return {
          dialogVisible: false,
          orderinfodata:{
            user:{uid:'',userCreate:'',userType:'',uphone:'',unickname:'',userCreate:'',status:'',usex:'',ubirthday:'',uremark:''},
            eduCourse:{title:'',},
            lecturer:{lecturerUserName:'',},
            orderNo:'',
            payTime:'',
            remarkCus:'',
            remark:'',
            tradeType:'',
            payType:''

          },
          dialogVisible1: false,
          dialogVisible2: false,
          dialogVisible3: false,
          dialogFormVisible:false,
          form:{
            remark:'',
            orderId:'',
          },
          formInline: {
            uphone: '',
            title: '',
            orderNo:'',
            orderStatus:'',
          },
          tableData: [],
          //pages用来自动生成序号的
          pages: {
            page: 1,
            size: 10,
            total: 100,
          },
          //这个page是用来分页的
          page:{
            current:1,
            size:1,
            total:0,
            search:'',
            orderNo:'',
            orderStatus:'',
          }
        }
      },
        mounted() {
          this.selectOrder();
        }

    }
</script>

<style>
  .bg-purple {
    background: #d3dce6;
  }
  .bg-purple-light {
    background: #e5e9f2;
  }
  .grid-content {
    border-radius: 4px;
    min-height: 36px;
  }
  .el-row {
    margin-bottom: 50px;
  }
  .el-col {
    border-radius: 4px;
  }
  .span{
    font-weight: 900;
  }
</style>
